<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseAvatar src="/img/avatars/1.svg" size="xs" shape="curved" />

    <BaseAvatar src="/img/avatars/5.svg" shape="curved" />

    <BaseAvatar src="/img/avatars/4.svg" size="md" shape="curved" />

    <BaseAvatar src="/img/avatars/3.svg" size="lg" shape="curved" />

    <BaseAvatar src="/img/avatars/8.svg" size="xl" shape="curved" />

    <BaseAvatar src="/img/avatars/16.svg" size="2xl" shape="curved" />

    <BaseAvatar src="/img/avatars/2.svg" size="3xl" shape="curved" />

    <BaseAvatar src="/img/avatars/20.svg" size="4xl" shape="curved" />
  </div>
</template>
